import MonacoEditor, {OnMount, EditorProps} from '@monaco-editor/react'
import { createATA } from './ata'
import { editor } from 'monaco-editor'
export interface EditorFile {
	name: string,
	value: string,
	language: string
}
interface Props {
	file: EditorFile,
	onChange?: EditorProps['onChange'],
	options?: editor.IStandaloneEditorConstructionOptions
}

export default function Editor (props: Props) {
	const {file, onChange, options} = props
  const handMount:OnMount = (editor, monaco) => {
    const ata = createATA((code, path) => {
      monaco.languages.typescript.typescriptDefaults.addExtraLib(code, `file://${path}`)
    })
    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
      jsx: monaco.languages.typescript.JsxEmit.Preserve,
      esModuleInterop: true,
			moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
			module: monaco.languages.typescript.ModuleKind.ESNext,
    })
		editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyJ, () => {
			editor.getAction('editor.action.formatDocument')?.run()
		});
    editor.onDidChangeModelContent(() => {
      ata(editor.getValue())
    })
    ata(editor.getValue())
  }
  return <MonacoEditor
    path={file.name}
    value={file.value}
    language={file.language}
    onMount={handMount}
		onChange={onChange}
    options={{
      // fontSize: 20,
      minimap: {
        enabled: false
      },
      scrollBeyondLastLine: false,
      scrollbar: {
        verticalScrollbarSize: 6,
        horizontalScrollbarSize: 6
      }
    }}
  />
}